<template>
  <div class="home">
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="table-w">
            <div class="title">今日入库列表</div>
            <el-table :data="stockList"
                      :row-style="tableRowStyle"
                      :header-cell-style="tableHeaderColor"
                      :row-class-name="tableCurrentRowStyle"
                      highlight-current-row
                      @row-click="rowClick"
                      style="width: 100%;font-size:26px;"
                      height="15.3rem">
              <el-table-column label="序号"
                               width="60">
                <template slot-scope="scope">{{scope.$index + 1}}</template>
              </el-table-column>
              <el-table-column prop="DesignID" label="标签" align="center"></el-table-column>
              <el-table-column prop="MaterielName"
                               label="物料名称"
                               align="center"></el-table-column>
              <el-table-column prop="StockCount"
                               label="数量"
                               width="140"
                               align="center">
                <template slot-scope="scope">{{Math.floor(scope.row.StockCount)}}({{scope.row.StockUnitName}})</template>
              </el-table-column>
              <el-table-column prop="StockStr10"
                               label="重量"
                               width="140"
                               align="center">
                <template slot-scope="scope">{{scope.row.StockStr10}}(克)</template>
              </el-table-column>
              <el-table-column prop="StockTime" label="时间" width="100" align="center">
                    <template slot-scope="scope">
                        {{$moment(scope.row.StockTime).format('HH:mm:ss')}}
                    </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="select-w">
            <div class="title">当前款式相关信息</div>
            <div class="top-w"
                 v-if="orderItem.CustomFlnkID">
              <div class="select">
                <div class="tit">厂家：</div>
                <div class="des">{{orderItem.CustomerName}}</div>
              </div>
              <div class="select">
                <div class="tit">合同：</div>
                <div class="des"
                     style="margin-top:2px;">{{orderItem.OrderOuterCode}}</div>
              </div>
              <div class="select">
                <div class="tit">款式：</div>
                <div class="des">{{orderItem.StyleName}}</div>
              </div>
            </div>
            <div class="button"
                 :class="orderItem.CustomFlnkID ? 'default' : '' "
                 @click="customerToFzml()">选择厂家</div>
          </div>

          <el-row>
            <el-col :span="16">
              <div class="info-w">
                <div class="title">
                  {{matterInfo.MaterielsName || '物料名称'}}
                  <div class="but"
                       :class="matterInfo.MaterielsName ? 'default' : '' "
                       @click="fzflDialog = true"
                       style="marginLeft:50px">选择辅料</div>
                </div>
                <div class="line">
                  <div class="row">
                    <div class="tit">料号：</div>
                    <div class="des">{{matterInfo.MaterielsDetailCode}}</div>
                  </div>
                  <div class="row">
                    <div class="tit">客户料号：</div>
                    <div class="des">{{matterInfo.CustomerBomID}}</div>
                  </div>
                </div>
                <div class="line">
                  <div class="row">
                    <div class="tit">颜色：</div>
                    <div class="des">{{matterInfo.BomColorName}}</div>
                  </div>
                  <div class="row">
                    <div class="tit">规格：</div>
                    <div class="des">{{matterInfo.BomSpecName}}</div>
                  </div>
                </div>
                <div class="line">
                  <div class="row">
                    <div class="tit">重量：</div>
                    <div class="des">{{flWeight}}</div>
                    <div class="unit">克</div>
                  </div>
                  <div class="row">
                    <div class="tit">整包：</div>
                    <el-input v-model="stockCountTemp"
                              ref="stockCountInput"
                              placeholder="请输入条数"
                              style="width:140px"></el-input>
                    <div class="unit">{{matterInfo.UnitName}}</div>
                    <div class="button"
                         :class="stockCount ? 'default':''"
                         @click="checkDialogShow()">校称</div>
                  </div>
                </div>

                <div class="send-w">
                  <div class="button"
                       v-if="selStockFlnkID"
                       @click="print()">打印标签</div>
                  <div class="button"
                       :class="flWeight ? 'default':''"
                       @click="dialogShow = true,flWeight=''">重新称重</div>
                  <div class="button"
                       @click="InStorage()">{{inStoraging ? '入库中' : '入库'}}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stack-w">
                <div class="title">
                  <span>垛号信息</span>
                  <div class="button"
                       :class="barCode ? 'default':''"
                       @click="changeBarCodeShow()">
                    <span>垛号</span>
                    <span v-if="barCodeShow">{{barCode || '请点击输入'}}</span>
                    <span v-else>
                      <el-input v-model="barCode"
                                placeholder="请输入垛号"
                                ref="barCodeInput"
                                style="width:120px;margin-top:-10px;"
                                @keyup.enter.native="barCodeEnter()"></el-input>
                    </span>
                  </div>
                </div>

                <div class="stack">
                  <el-table :data="stackList"
                            :row-style="tableRowStyle"
                            :header-cell-style="tableHeaderColor"
                            :row-class-name="tableCurrentRowStyle"
                            highlight-current-row
                            style="width: 100%;font-size:26px;"
                            height="12rem">
                    <el-table-column prop="MaterielName"
                                     label="物料名称"
                                     align="center"></el-table-column>
                    <el-table-column prop="MaterielClassName"
                                     label="物料类型"
                                     width="100"
                                     align="center"></el-table-column>
                    <el-table-column prop="StockCount"
                                     label="数量"
                                     width="100"
                                     align="center">
                      <template slot-scope="scope">{{scope.row.StockCount}}({{scope.row.StockUnitName}})</template>
                    </el-table-column>
                    <el-table-column prop="StockStr10"
                                     label="重量"
                                     width="100"
                                     align="center">
                      <template slot-scope="scope">{{scope.row.StockStr10}}(克)</template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!-- 称重弹窗 -->
    <div class="dialogBox-w"
         v-show="dialogShow">
      <div class="dialogBox">
        <div class="close">
          <div class="el-icon-circle-close icon"
               @click="dialogShow = false" />
        </div>
        <div class="info-w">
          <div class="top">
            <div class="title">{{matterInfo.MaterielsName || '物料名称'}}</div>
          </div>
          <div class="line">
            <div class="row">
              <div class="tit">料号：</div>
              <div class="des">{{matterInfo.MaterielsDetailCode}}</div>
            </div>
            <div class="row">
              <div class="tit">客户料号：</div>
              <div class="des">{{matterInfo.CustomerBomID}}</div>
            </div>
          </div>
          <div class="line">
            <div class="row">
              <div class="tit">颜色：</div>
              <div class="des">{{matterInfo.BomColorName}}</div>
            </div>
            <div class="row">
              <div class="tit">规格：</div>
              <div class="des">{{matterInfo.BomSpecName}}</div>
            </div>
          </div>
          <div class="line">
            <div class="row">
              <div class="ftit">请称重：</div>
              <el-input v-model="flWeight"
                        ref="weightInput"
                        placeholder="请称重"
                        style="width:140px"
                        @keyup.enter.native="makeSure"></el-input>
              <div class="unit">克</div>
            </div>
          </div>
          <div class="send-w">
            <div class="button"
                 @click="dialogShow = false">关闭</div>
            <div class="button"
                 @click="makeSure()">确定</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 辅料列表弹框 -->
    <div class="dialogBox-w"
         v-show="fzflDialog">
      <div class="dialogBox1">
        <div class="close">
          <div class="el-icon-circle-close icon"
               @click="fzflDialog = false" />
        </div>
        <div class="dialogTit">请选中相关辅料明细列表（可扫码）</div>
        <div class="block-w"
             v-if="detailList.length > 0">
          <div class="block"
               :class="item.FlnkID == selDetail ? 'active' : ''"
               v-for="(item,index) in detailList"
               :key="index"
               @click="selectDetail(item)">
            <div class="title">{{item.MaterielsName}}</div>
            <div class="line">料号：{{item.MaterielsDetailCode}}</div>
            <div class="line">
              <div class="row">颜色：{{item.BomColorName}}</div>
              <div class="row">型号：{{item.BomSpecName}}</div>
            </div>
            <div class="line">客户料号：{{item.CustomerBomID}}</div>
          </div>
        </div>
        <div class="block-w"
             v-if="detailList.length == 0">
          <div class="block-none">暂无相关物料</div>
        </div>
        <div class="dialogBot">
          <div class="button"
               @click="fzflDialog = false">关闭</div>
          <div class="button"
               @click="makefzflSure()">确定</div>
        </div>
      </div>
    </div>

    <!-- 校称弹框 -->
    <div class="dialogBox-w"
         v-show="checkDialog">
      <div class="dialogBox2">
        <div class="close">
          <div class="el-icon-circle-close icon"
               @click="checkDialog = false" />
        </div>
        <div class="block">
          <div class="title">请校称：</div>
          <el-input v-model="checkNum"
                    ref="checkNumInput"
                    placeholder="请输入校称数量"
                    style="width:140px"
                    @keyup.enter.native="makeCheckNumSure"></el-input>
          <div class="line">{{matterInfo.UnitName}}</div>
          <div class="line">=</div>
          <el-input v-model="checkWeight"
                    ref="checkWeightInput"
                    placeholder="请输入校称重量"
                    style="width:140px"
                    @keyup.enter.native="makeCheckSure"></el-input>
          <div class="line">克</div>
        </div>
        <div class="dialogBot">
          <div class="button"
               @click="checkDialog = false">关闭</div>
          <div class="button"
               @click="makeCheckSure()">确定</div>
        </div>
      </div>
    </div>

    <div v-if="dialogVisible"
         class="menuModalBox">
      <dialogchangj :instoreType="params.instoreType"
                    :instoreurl="params.instoreurl"></dialogchangj>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import dialogchangj from '@/components/dialogchangj' // 厂家弹出框
import Mixin from '@/components/mixin' // 混入
import {getMatterDetailList, getflStockList, getKCNumber, inflStorage, getFabricInflStockDesign, getStockInfoByFlnkID, getProductStockListByBarCode} from '@/api/instorage' // 接口
import {GetMaterielWeighing} from '@/api/tool'

export default {
  name: 'fzfl',
  data () {
    return {
      stockID: '',
      stockList: [],
      detailList: [],
      matter: '',
      matterInfo: '',
      flWeight: '', // 重量
      setInterval: null,
      selStockFlnkID: '',
      dialogShow: false,
      dialogVisible: false,
      params: {
        instoreType: '',
        titlename: '',
        instoreurl: ''
      },
      fzflDialog: false,
      selDetail: '',
      stockCount: '',
      stockCountTemp: '',
      barCodeShow: true,
      barCode: '',
      checkDialog: false,
      checkNum: '',
      checkWeight: '',
      inStoraging: false,
      stackList: [],
      materielType: '',
      isInStock: false
    }
  },
  computed: {
    ...mapState({
      orderItem: (state) => state.dialogchangj.orderItem
    })
  },
  components: {
    dialogchangj: dialogchangj
  },
  mixins: [Mixin],
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    tableCurrentRowStyle ({ row, rowIndex }) {
      let vm = this
      if (vm.isInStock) {
        if (rowIndex === 0) {
          return 'warning-row'
        }
      } else {
        return 'normal-row'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    // 根据款式物料读取入库物料明细列表
    getMatterDetailList () {
      let vm = this
      let params = new FormData()
      params.append('CustomerFlnkID', vm.orderItem.CustomFlnkID)
      params.append('OrderOuterCode', vm.orderItem.OrderOuterCode)
      params.append('StyleFlnkID', vm.orderItem.StyleFlnkID)
      params.append('MaterielTypeCode', vm.materielType.slice(0, 1))
      getMatterDetailList(params).then((response) => {
        if (response.data.data) {
          vm.detailList = response.data.data
          vm.fzflDialog = true
        }
      })
    },
    // 读取今日最新面料入库列表
    getStockList () {
      let vm = this
      let params = new FormData()
      params.append('TopCount', 20)
      params.append('UserFlnkID', vm.getLocalStorage('UserFlnkID'))
      params.append('Type', vm.materielType.slice(0, 1))
      getflStockList(params).then((response) => {
        vm.stockList = response.data.data
      })
    },
    // 根据客户码读取bom物料明细
    getStockListByCustomID () {
      let vm = this
      let params = new FormData()
      params.append('CustomID', vm.customID)
      vm.$axios
        .post('ProductManager/KCClient/GetBomMaterielDetailByCustomID',
          params
        )
        .then((response) => {
          if (response.data.data) {
            vm.detailList = response.data.data
          }
        })
    },
    // 入库记账
    async InStorage () {
      let vm = this
      if (vm.matterInfo === '') {
        vm.$message('请选择辅料')
        return
      }
      if (vm.FLWeight === '') {
        vm.$message('请输入重量')
        vm.$refs.weightInput.focus()
        return
      }
      if (vm.StockCount === '') {
        vm.$message('请输入整包多少条')
        vm.$refs.stockCountInput.focus()
        return
      }

      if (vm.inStoraging) {
        vm.$message('请勿重复提交')
        return
      }

      await vm.getKCNumber()
      vm.inStoraging = true
      let params = {
        StockID: vm.stockID,
        CustomerFlnkID: vm.matterInfo.CustomerFlnkID,
        OrderOuterCode: vm.matterInfo.OrderOuterCode,
        StyleFlnkID: vm.matterInfo.StyleFlnkID,
        MSMainFlnkID: vm.matterInfo.MSMainFlnkID,
        MSDetailFlnkID: vm.matterInfo.MSDetailFlnkID,
        FLWeight: Math.ceil(vm.flWeight),
        StockCount: Number(vm.stockCount).toFixed(4),
        StockUnitFlnkID: vm.matterInfo.UnitID,
        WarehouseFlnkID: vm.warehouseFormat(vm.materielType.slice(0, 1)),
        BarCode: vm.barCode,
        CustomerBomID: vm.matterInfo.CustomerBomID,
        OrgID: vm.getLocalStorage('OrgID'),
        OperFlnkID: vm.getLocalStorage('UserFlnkID')
      }
      if (params.StockCount === 0.0000 || params.StockCount === '0.0000') {
        vm.$message('请校称')
        return
      }
      // alert(params)
      inflStorage(params).then((response) => {
        if (response.data.result) {
          vm.getStockList()
          vm.getProductStockListByBarCode()
          vm.$message('入库成功')
          vm.isInStock = true
          vm.clearAll()
        } else {
          vm.$message(response.data.error)
        }
        vm.inStoraging = false
      })
    },
    // 读取入库单
    async getKCNumber () {
      let vm = this
      let params = {
        ShortName: 'FL'
      }
      await getKCNumber(params).then((response) => {
        if (response.data) {
          vm.stockID = response.data
        }
      })
    },
    // 读取面料入库明细的存货标签列表
    getFabricInStockDesign () {
      let vm = this
      let params = new FormData()
      params.append('StockFlnkID', vm.selStockFlnkID)
      getFabricInflStockDesign(params).then((response) => {
        if (vm.isAndroid()) {
          window.android.print(
              vm.materielType.slice(0, 1),
              JSON.stringify(response.data.data)
            )
        } else {
          vm.$message(JSON.stringify(response.data.data))
        }
      })
    },
    // 单击表格某一行
    rowClick (row) {
      let vm = this
      vm.stockID = row.StockID
      vm.selStockFlnkID = row.FlnkID
      vm.getStockInfoByFlnkID()
      // vm.matterInfo = vm.detailList[row.FlnkID]
    },
    // 打印标签
    print () {
      let vm = this
      if (vm.selStockFlnkID) {
        vm.getFabricInStockDesign()
      }
    },
    customerToFzml () {
      let vm = this
      vm.params = {
        instoreType: vm.$route.query.type,
        instoreurl: '/instorage/fzfl'
      }
      vm.dialogVisible = true
    },
    getWindowClose: function () {
      let vm = this
      vm.dialogVisible = false
    },
    selectDetail (item) {
      let vm = this
      if (item) {
        vm.selDetail = item.FlnkID
        vm.matterInfo = item
      }
    },
    makefzflSure () {
      let vm = this
      if (vm.selDetail) {
        vm.flWeight = ''
        vm.fzflDialog = false
        vm.dialogShow = true
      } else {
        vm.$message('请选择辅料')
      }
    },
    makeSure () {
      let vm = this
      if (vm.flWeight) {
        vm.dialogShow = false
        vm.$refs.stockCountInput.focus()
      } else {
        vm.$message('请称重')
      }
    },
    changeBarCodeShow () {
      let vm = this
      vm.barCodeShow = false
      vm.$nextTick(() => {
        vm.$refs.barCodeInput.focus()
      })
    },
    barCodeEnter () {
      let vm = this
      vm.getProductStockListByBarCode()
      vm.barCodeShow = true
    },
    // 公共接口-根据存货表的FLnkID读取库存记录
    getStockInfoByFlnkID () {
      let vm = this
      let params = new FormData()
      params.append('StockFlnkID', vm.selStockFlnkID)
      getStockInfoByFlnkID(params).then((response) => {
        if (response.data.result) {
          vm.matterInfo = {
            MaterielsDetailCode: response.data.data.MaterielFullCode,
            CustomerBomID: response.data.data.StockStr2,
            MaterielsName: response.data.data.MaterielName,
            BomColorName: response.data.data.ColorConfigName,
            BomSpecName: response.data.data.SpecConfigName,
            UnitName: response.data.data.StockUnitName
          }
          vm.flWeight = response.data.data.StockStr10
          vm.stockCount = response.data.data.StockCount
          vm.stockCountTemp = Math.floor(vm.stockCount)
        }
      })
    },
    checkDialogShow () {
      let vm = this
      // 读取物料信息
      let params = {
        MSDetailFlnkID: vm.matterInfo.MSDetailFlnkID,
        OperFlnkID: vm.getLocalStorage('UserFlnkID')
      }
      GetMaterielWeighing(params).then((response) => {
        if (response.data.result) {
          if (response.data.data != null) {
            vm.checkNum = 1
            vm.checkWeight = response.data.data.UnitWeight
          }
        }
      })
      vm.checkDialog = true
      vm.$refs.checkNumInput.focus()
    },
    makeCheckNumSure () {
      let vm = this
      vm.$refs.checkWeightInput.focus()
    },
    makeCheckSure () {
      let vm = this
      if (!vm.checkNum || !vm.checkWeight) {
        vm.$message('请输入校称值')
      } else {
        vm.stockCount = (vm.flWeight / vm.checkWeight) * vm.checkNum
        vm.checkDialog = false
        vm.stockCountTemp = Math.floor(vm.stockCount)
      }
    },
    clearAll () {
      let vm = this
      vm.flWeight = ''
      vm.stockCount = ''
      vm.stockCountTemp = ''
      vm.matterInfo = ''
      vm.barCode = ''
    },
    // 公共接口-根据垛号读取库存记录列表
    getProductStockListByBarCode () {
      let vm = this
      let params = new FormData()
      params.append('BarCode', vm.barCode)
      getProductStockListByBarCode(params).then((response) => {
        if (response.data.result) {
          vm.stackList = response.data.data
        } else {
          vm.$message(response.data.error)
        }
      })
    }
  },
  watch: {
    orderItem: {
      // 表格数据刷新后需清空之前查看的订单详情内容
      handler: function (newVal, oldVal) {
        let vm = this
        vm.getMatterDetailList()
      },
      deep: true
    },
    dialogShow (newVal, oldVal) {
      let vm = this
      if (newVal === true) {
        vm.$nextTick(() => {
          vm.$refs.weightInput.focus()
        })
      }
    }
  },
  mounted () {
    let vm = this
    vm.setInterval = setInterval(() => {
      if (vm.getLocalStorage('UserFlnkID')) {
        vm.getStockList()
        clearInterval(vm.setInterval)
        vm.setInterval = null
      }
    }, 1000)

    setTimeout(() => {
      vm.getMatterDetailList()
    }, 0)
    vm.materielType = vm.$route.query.type
  },
  beforeDestroy: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '~@/css/instorage/fzfl.scss';
</style>
<style lang="scss">
.info-w,
.stack-w,
.dialogBox-w {
  .el-input__inner {
    background: #002752;
    color: #fff;
  }
}
.el-table .warning-row {
	background: #002752 !important;
}
.el-table .normal-row{
    background: rgb(0, 63, 140) !important;
}
.el-table::before {
    height: 0px;
 }
</style>
